<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左右选中</title>
	</head>
	<body>
		<table align="center">
			<tr>
				<td>
					<select id="left" multiple="multiple" style="width: 100px;" size="10">
						<option>A</option>
						<option>B</option>
						<option>C</option>
						<option>D</option>
						<option>E</option>
						<option>F</option>
						<option>G</option>
						<option>H</option>
					</select>
				</td>
				<td>
					<button id="toRight01">></button> <br>
					<button id="toRight02">>></button> <br>
					<button id="toRight03">>>></button> <br>
					<button id="toLeft01"><</button> <br>
					<button id="toLeft02"><<</button> <br>
					<button id="toLeft03"><<<</button> 
				</td>
				<td>
					<select id="right" multiple="multiple" style="width: 100px;" size="10">
						
					</select>
				</td>
			</tr>
		</table>
		
		
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/**
				 * 移动左侧选中的第一个选项到右侧
				 */
				$("#toRight01").click(function(){
					// 获取左侧的所有的下拉选项  
					// :selected 获取被选中的选项
					var left = $("#left option:selected:eq(0)");
					console.log(left);
					// 将左侧被选中的第一个选项追加到右侧
					// append() 将指定内容追加到元素的内部的最后，如果内容 不存在，则添加；如果内容存在，则剪切
					$("#right").append($("#left option:selected:eq(0)"))
				});
				
				
				/**
				 * 移动左侧选中的选项到右侧
				 */
				$("#toRight02").click(function(){
					$("#right").append($("#left option:selected"));
				});
				
				
				/**
				 * 移动左侧所有选项到右侧
				 */
				$("#toRight03").click(function(){
					$("#right").append($("#left option"));
				});
			});
			
			
		</script>
	</body>
</html>
